<template>
  <div class="user-center">
    <div class="left-wrapper">
      <div class="title">账户中心</div>
      <a-menu
        style="width: 220px"
        :open-keys.sync="openKeys"
        mode="inline"
        :selectedKeys="selectedKeys"
      >
        <template v-for="menu in menus">
          <a-sub-menu :key="menu.key" v-if="menu.children.length">
            <span slot="title">
              <icon :name="menu.icon" />
              <span>{{ menu.name }}</span>
            </span>
            <a-menu-item
              v-for="item in menu.children"
              :key="item.key"
              @click="$router.push(item.key)"
            >
              {{ item.name }}
            </a-menu-item>
          </a-sub-menu>

          <a-menu-item v-else :key="menu.key" @click="$router.push(menu.key)">
            <icon :name="menu.icon" />
            {{ menu.name }}
          </a-menu-item>
        </template>
      </a-menu>
    </div>

    <router-view class="right-wrapper" />
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  data() {
    return {
      openKeys: [],
      selectedKeys: [this.$route.path]
    };
  },
  mounted() {
    this.getAccountAction();
  },
  computed: {
    ...mapGetters(["account"]),
    menus() {
      const menus = [
        {
          name: "基本信息",
          key: "/user-center/profile",
          icon: "user",
          children: []
        },
        {
          name: "首页管理",
          key: "/user-center/store-edit",
          icon: "report",
          children: []
        },
        {
          name: "商品列表",
          key: "/user-center/goods",
          icon: "dy",
          children: []
        },
        {
          name: "项目信用",
          key: "/user-center/project",
          icon: "task",
          children: []
        },
        {
          name: "买家中心",
          key: "/user-center/orders",
          icon: "report",
          children: []
        },
        {
          name: "卖家中心",
          key: "/user-center/seller",
          icon: "goods",
          children: []
        },
        {
          name: "安全设置",
          key: "/user-center/security",
          icon: "user",
          children: []
        }
      ];

      return menus;
    }
  },
  watch: {
    "$route.path": function(val) {
      this.selectedKeys = [val];
    }
  },
  methods: {
    ...mapActions(["getAccountAction"])
  }
};
</script>

<style lang="less" scoped>
.user-center {
  display: flex;
  min-height: 400px;

  /deep/.ant-menu {
    border-right-color: transparent;
  }

  /deep/.ant-menu-item,
  .menu-item {
    display: flex;
    align-items: center;
    font-size: 15px;
  }

  .left-wrapper {
    background: @white;
    border-right: 1px solid @border-color;

    .title {
      font-weight: bold;
      font-size: 17px;
      padding-left: 25px;
      margin: 16px 0 8px;
    }
  }

  .right-wrapper {
    flex: 1;
  }

  .icon {
    width: 16px;
    height: 16px;
    margin-right: 12px;
  }

  /deep/.ant-menu-item-selected {
    background: @white;
  }

  /deep/.v-title {
    &::before {
      background: @primary-color;
    }
  }
}
</style>
